<template>
	<view class="buyvip" v-if="user">
		<view class="navigation">
			<image src="/static/images/backwhite.png" class="collage-back" @click="back()" mode=""></image>
			<view class="navigation-title">开通会员</view>
		</view>
		<view class="header">
			<image src="/static/images/buyvipheaderbg.png" class="buyvipheaderbg" mode=""></image>
			<view class="user-info">
				<image :src="user.avatar_url" class="user-img" mode=""></image>
				<view class="user-vip-info">
					<view>{{ user.name }}</view>
					<view v-if="user.grade=='normal'">您暂未开通有点东西VIP</view>
					<view v-else>会员有效期：{{ user.vip_expired_day }}</view>
				</view>
			</view>
		</view>
		<view class="card-com">
			<view class="card-com-title">开通VIP</view>
			<view class="buy-vip-money">
				<view>30天VIP</view>
				<view>
					<text>￥</text>
					<text>9.9</text>
				</view>
				<view class="lable-box">
					<image src="/static/images/label.png" mode=""></image>
					<view>限时特惠</view>
				</view>
			</view>
		</view>
		<view class="buy-vip-btn" @click="prepare">
			<view>
				<text class="money-icon">￥</text>
			</view>
			<view>9.9</view>
			<view>去支付</view>
		</view>
		
		<view class="red-agreement">
			<view class="choice-radio-box" @click="choice()">
				<image src="/static/images/choicedicon.png" class="choiced-radio" v-if="isChoice" mode="" ></image>
				<image src="/static/images/unchoice.png" class="choice-radio" v-else mode=""></image>
			</view>
			<view @click="choice()">开通VIP前阅读</view>
			<view @click="goToAgreement">《服务协议》</view>
		</view>
		<uni-popup ref="paymentpopup" type="bottom" background-color="white">
			<view class="choose-payment">
				<view class="head">请选择支付方式</view>
				<payment-choose-com :user="user" @paymentChosen="setPayment" :balanceShow="balanceShow"  :shoppingmoneyShow="shoppingmoneyShow" :alipayShow="alipayShow"></payment-choose-com>
				<view class="operate">
					<view class="desc">
						<view class="title">支付金额：</view>
						<view class="money">9.9元</view>
					</view>
					<view class="pay">
						<button class="button" @click="buy">确认支付</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script>
	// /解决IOS返回页面不刷新的问题
	/* 	var isPageHide = false;
		window.addEventListener('pageshow', function() {
				if(isPageHide) {
						window.location.reload();
				}
		});
		window.addEventListener('pagehide', function() {
				isPageHide = true;
		}) */
	import CommHeaderCom from 'components/common/CommHeaderCom'
	import store from 'store'
	import { mapGetters } from 'vuex'
	import AuthChecking from "mixins/AuthChecking"
	import CurrentUser from "mixins/CurrentUser"
	
	import { buyVip } from "api/vipPurchaseApi"
	import { payVipPurchaseByWxmini,payVipPurchaseByAdapayWxmini,payVipPurchaseByAliwap } from "api/paymentApi"
	import { balancepay,wxpay } from "helpers/paymentHelper"
	import PaymentChooseCom from "components/common/PaymentChooseCom"
	import HostEnv from "mixins/HostEnv"
	export default {
		store,
		mixins: [
			AuthChecking,
			CurrentUser,
			HostEnv
		],
		computed: {
			...mapGetters(['user'])
		},
		components:{
			/* CommHeaderCom, */
			PaymentChooseCom
		},
		data(){
			return {
				isChoice:false,
				payment: 'weixin', // balance, weixin
				balanceShow:true,
				shoppingmoneyShow:false,
				from:'',
				isWeiXin:true,
				alipayShow:false
			}
		},
		methods:{
			isWeiXinLogin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			setPayment(payment) {
				this.payment = payment
			},
			back(){
				if(this.from==''){
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
				}else{
					uni.navigateBack()
				}
			},
			prepare() {
				let _this = this;
				// this.showmsg()
				
				// uni.navigateTo({url: '/packs/pages/download/download'})
				
				// 支付
				if (!this.isChoice) {
					uni.showModal({
						title: '提示',
						content: '请先阅读用户协议',
						showCancel: false
					})
					return false
				}else{
					uni.showModal({
					    title: '提示',
					    content: '会员费支付后不可退款，请先了解会员权益，确认开通后再支付。如有特殊情况，请咨询客服。',
							confirmColor:'#333333',
							confirmText:'确认开通',
							cancelColor:'#999999',
					    success: function (res) {
					        if (res.confirm) {
					            _this.$refs.paymentpopup.open('bottom')
					        }
					    }
					});
				}
			},
			async buy() {
				uni.removeStorage({
					key: 'payid'
				})
				uni.removeStorage({
					key: 'isBuyVip'
				})
				const purchase = await buyVip()
				if (this.payment === 'balance') {
					await balancepay(purchase.id, 'vipPurchase')
				}
				if (this.payment === 'weixin') {
					const payload = await payVipPurchaseByAdapayWxmini(purchase.id)
					let jumpPayUrl = ''
					if(this.isWeiXinLogin){
						jumpPayUrl = payload.result.wx_h5_pay_url;
					}else{
						jumpPayUrl = payload.result.scheme_code;
					}
					window.location.href = jumpPayUrl;
				}
				if(this.payment == 'alipay'){
					const payload = await payVipPurchaseByAliwap(purchase.id)
					uni.setStorage({
						key: 'isBuyVip',
						data: true
					})
					//将接口返回的Form表单显示到页面
					document.querySelector('body').innerHTML = payload.result;
					//调用submit 方法
					document.forms[0].submit()
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
				}
			},
			isWeiXinLogin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			choice(){
				this.isChoice = !this.isChoice
			},
			goToAgreement() {
				window.location.href = "https://shopdev.littleshop.shop/wap/configs/user/agreement"
				// uni.navigateTo({
				// 	url: `/packs/pages/user/agreement`
				// })
			}
		},
		onLoad(options) {
			if(options.from){
				this.from  = options.from
			}
		},
		async onShow() {
			if(this.isWeiXinLogin()){
				this.isWeiXin = true;
				this.alipayShow = false
			}else{
				this.isWeiXin = false
				this.alipayShow = true
			}
		},
	}
</script>

<style scoped lang="scss">
	page{
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.collage-back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top:26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
	.buyvipheaderbg{
		display: block;
		width: 750rpx;
		height: 420rpx;
		position: absolute;
		left:0;
		top:0;
		z-index: 0;
	}
	.header{
		width: 750rpx;
		height: 420rpx;
		position: relative;
		padding-top: 110rpx;
	}
	.user-info{
		display: flex;
		align-items: center;
	}
	.user-img{
		display: block;
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin:0 16rpx 0 20rpx;
	}
	.user-vip-info{
		position: relative;
		z-index: 1;
		>view:nth-child(1){
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 44rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}
	}
	.card-com{
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 48rpx;
		margin: 0 auto;
		margin-top: -190rpx;
		position: relative;
		z-index: 1;
	}
	.card-com-title{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
		margin:0 0 32rpx 32rpx;
		padding-top: 32rpx;
	}
	.buy-vip-money{
		width: 646rpx;
		height: 176rpx;
		background: #FDF5EB;
		border-radius: 16rpx;
		border: 2rpx solid #FFAE57;
		margin-left: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		>view:nth-child(1){
			font-size: 44rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 60rpx;
		}
		>view:nth-child(2){
			height:44rpx;
			margin-right: 60rpx;
			display: flex;
			align-items: center;
			>text:nth-child(1){
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4924;
			}
			>text:nth-child(2){
				font-size: 46rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF4924;
			}
		}
	}
	.lable-box{
		width: 160rpx;
		height: 44rpx;
		position:absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left:-2rpx;
		top:-22rpx;
		image{
			display: block;
			width: 160rpx;
			height: 44rpx;
			position: absolute;
			left:0;
			top:0;
			z-index:0;
		}
		>view{
			position: relative;
			z-index: 1;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			
		}
	}
	.buy-vip-btn{
		width: 646rpx;
		height: 116rpx;
		background: linear-gradient(90deg, #FF9C18 0%, #FF4E0C 100%);
		border-radius: 20rpx;
		position: fixed;
		left:52rpx;
		bottom: 150rpx;
	}
	.buy-vip-btn{
		display: flex;
		align-items:center;
		justify-content: center;
		>view:nth-child(1){
			height: 116rpx;
			font-size:28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		>view:nth-child(2){
			font-size: 56rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
		>view:nth-child(3){
			font-size:38rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 22rpx;
		}
	}
	.money-icon{
		display: block;
		height:28rpx;
		padding-top: 48rpx;
	}
	.red-agreement{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		width: 100%;
		bottom: 90rpx;
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FE7F00;
		}
	}
	.choice-radio-box{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
	}
	.choice-radio{
		display: block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}
	.choiced-radio{
		display: block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}
	.choose-payment {
		padding: 20rpx 20rpx 50rpx 20rpx;
	
		.head {
			margin: 20rpx auto;
			text-align: center;
		}
	
		.operate {
			width: 100%;
			display: flex;
			justify-content: space-between;
	
			.desc {
				display: flex;
				align-items: baseline;
				.title {
					font-size: 32rpx;
					color:#333333;
					font-weight: 600;
					margin-left: 20rpx;
				}
	
				.money {
					font-size:40rpx;
					color: #FF4924;
					font-weight: 600;
				}
			}
	
			.pay {
				.button {
					width: 224rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 40rpx;
					background-color: #FEBF05;
					text-align: center;
					font-size: 24rpx;
					color: white;
				}
			}
		}
	}
</style>
